<template>
  <div>
    <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px" onsubmit="return false;">
      <el-form-item label="准考号" prop="zkh">
        <el-input
          v-model="queryParams.zkh"
          placeholder="请输入准考号"
          clearable
          size="small"
          ref="queryzkh"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQueryElBut">搜索</el-button>
        <button type="submit" @click="handleQuery" style="display: none" ref="but12"></button>
      </el-form-item>
    </el-form>
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="printImg"
        >打印
        </el-button>
      </el-col>
    </el-row>
    <div id="export" style="text-align: center;width: 100%">
      <div v-for="(item,index) in candidateList2" style="float: left;text-align: center;width: 100%; margin-top: 50px;">
        <table :key="index" style="width: 100%">
          <tr>
            <td style="text-align: center; height: 80px" colspan="2">
              <h2>{{ yearN }}年区初中毕业生</h2>
            </td>
          </tr>
          <tr>
            <td style="text-align: center;" colspan="2">
              <h2>体育考试成绩单</h2>
            </td>
          </tr>
          <tr>
            <td colspan="2">
              <div class="" style="width: 100%; margin-left: 40px; margin-top: 30px;">
                <table class="" style="width: 90%;border-collapse: collapse;text-align: center" border="1"
                       cellspacing="0">
                  <tr>
                    <th>准考证号</th>
                    <th>学校</th>
                    <th>姓名</th>
                    <th> 班级</th>
                    <th>体育考试总分</th>
                  </tr>
                  <tr>
                    <td>{{ item.zkh }}</td>
                    <td>{{ item.zxmc }}</td>
                    <td>{{ item.name }}</td>
                    <td>{{ item.bjdm }}</td>
                    <td rowspan="7">{{ item.total }}</td>
                  </tr>
                  <tr>
                    <td></td>
                    <th>项目名称</th>
                    <th colspan="2">成绩</th>
                  </tr>
                  <tr>
                    <th>选考1</th>
                    <td>{{ item.bctyxm }}</td>
                    <td colspan="2">{{ item.bctyxmValue === 0 ? '-' : item.bctyxmValue }}</td>
                  </tr>
                  <tr>
                    <th>选考2</th>
                    <td>{{ item.xctyxm1 }}</td>
                    <td colspan="2">{{ item.xctyxm1Value === 0 ? '-' : item.xctyxm1Value }}</td>
                  </tr>
                  <tr>
                    <th>选考3</th>
                    <td>{{ item.xctyxm2 }}</td>
                    <td colspan="2">{{ item.xctyxm2Value === 0 ? '-' : item.xctyxm2Value }}</td>
                  </tr>
                  <tr>
                    <th>选考4</th>
                    <td></td>
                    <td colspan="2"></td>
                  </tr>
                  <tr>
                    <th>日常成绩</th>
                    <td></td>
                    <td colspan="2">{{ item.usualResults === 0 ? '-' : item.usualResults }}</td>
                  </tr>
                </table>
              </div>
            </td>
          </tr>
          <tr style="margin-top: 30px;">
            <td style="text-align: center; height: 80px;"><img :src="imgBarcodeSrc(item.barCode)"/>
              <br>{{ item.zkh }}
            </td>
            <td>
              <table>
                <tr style="height: 50px">
                  <td>考生签名：</td>
                  <td></td>
                </tr>
                <tr>
                  <td>确认时间：</td>
                  <td>{{ nowTime }}</td>
                </tr>
              </table>
            </td>
          </tr>
        </table>
      </div>
    </div>
  </div>
</template>
<style>
h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: 0.5em;
  color: rgba(0, 0, 0, .85);
  font-weight: 500;
}
</style>
<script>
import { candidates, print } from '@/api/business/candidate/candidate'

export default {
  name: 'List',
  data() {
    return {
      candidateList2: [],
      yearN: 2021,
      nowTime: '',
      // 查询参数
      queryParams: {
        pageNo: 1,
        pageSize: 1,
        qy: null,
        zxmc: null,
        bjdm: null,
        zkh: null
      },
      canditateId: ''
    }
  },
  created() {
    let nowDate = new Date()
    this.nowTime = this.CurentTime()
    //this.nowTime = nowDate.getFullYear() + '-' + nowDate.getMonth() + '-' + nowDate.getDate() + ' ' + nowDate.getHours() + ':' + nowDate.getMinutes() + ':' + nowDate.getSeconds()
    this.yearN = nowDate.getFullYear()
    //this.getNowTime()
  },
  mounted() {
    this.queryParams.zkh = ''
    //清空原先内容，光标锁定准考号文本框
    this.$refs.queryzkh.focus()
  },
  methods: {
    CurentTime() {
      var now = new Date()
      var year = now.getFullYear()       //年
      var month = now.getMonth() + 1     //月
      var day = now.getDate()            //日
      var hh = now.getHours()            //时
      var mm = now.getMinutes()          //分
      var clock = year + '-'
      if (month < 10) {
        clock += '0'
      }
      clock += month + '-'
      if (day < 10) {
        clock += '0'
      }
      clock += day + ' '
      if (hh < 10) {
        clock += '0'
      }
      clock += hh + ':'
      if (mm < 10) clock += '0'
      clock += mm
      return (clock)
    },
    handleQueryElBut() {
      this.handleQuery()
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNo = 1
      this.getList()
    },
    /** 查询考生列表 */
    getList() {
      this.canditateId = ''
      if (this.queryParams.zkh) {
        candidates(this.queryParams).then(response => {
          const records = response.data.records
          if (records.length===0){
            this.queryParams.zkh = '';
            return this.$message.error('考生不存在');
          }
          for (var i = 0; i < records.length; i++) {
            records[i].total = records[i].bctyxmValue + records[i].xctyxm1Value + records[i].xctyxm2Value + parseInt(records[i].usualResults)
            records[i].usualResults = records[i].usualResults.toString().replace('.0', '')
            this.canditateId = records[i].id
          }
          this.candidateList2 = records
          if (this.candidateList2) {
            this.queryParams.zkh = ''
            this.printImg()
          }
        })
      }
    },
    imgPhotoSrc(url) {
      return 'data:image/jpeg;base64,' + url
    },
    imgBarcodeSrc(url) {
      return 'data:image/jpeg;base64,' + url
    },
    //打印准考证
    printImg() {
      const a = this.candidateList2.map(item => {
        if (item.bctyxmValue === 0) {
          return true;
        } else if (item.xctyxm1Value === 0) {
          return true;
        } else if (item.xctyxm2Value === 0) {
          return true;
        } else {
          return false;
        }
      })
      // if (a[0]) {
      //   return this.$message.error('该考生考试未完成')
      // }

      const LODOP = window.getLodop()
      if (!LODOP) {
        return this.$message.error('打印机初始化失败,请刷新重试')
      }
      let query = { id: this.canditateId.toString() }
      print(query).then(response => {
        if (response.status === 'success') {
          try {
            LODOP.SET_LICENSES("","A98A59E2B82D9184B34CF6DC925F8EAB","","");
            LODOP.PRINT_INIT('准考证打印')
            LODOP.SET_PRINT_MODE('PRINT_PAGE_PERCENT', 'Auto-Width')
            LODOP.ADD_PRINT_HTM(0, 0, '100%', '100%', '<body leftmargin=0 topmargin=0>' + document.getElementById('export').innerHTML + '</body>')
            // LODOP.SET_PREVIEW_WINDOW(0,0,0,0,0,"");
            LODOP.SET_PRINT_STYLEA(0, 'Horient', 2)
            // LODOP.PREVIEW();
            LODOP.PRINT()
            this.$message.success('打印任务发送成功，请稍候')
            //清空原先内容，光标锁定准考号文本框
            this.$refs.queryzkh.focus()
          } catch (e) {
            this.$message.error('打印任务发送失败，请重试')
            throw e
          }
        } else {
          this.$modal.msgSuccess(response.message)
        }
      })
    }
  }
}
</script>

<style>
.divtable table {
  border-collapse: collapse;
}

.divtable table th {
  border: 1px solid #1e1e1e;
}

.divtable table td {
  border: 1px solid #1e1e1e;
  text-align: center
}
</style>
